﻿

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>选择菜单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

    <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                      
                        <div class="layui-card-body">
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">全选</button>
                                <button type="button" class="layui-btn layui-btn-sm" lay-demo="setUnChecked">全不选</button>
                                <button type="button" class="layui-btn layui-btn-sm" lay-demo="setReverseChecked">反选</button>
                            </div>
                            <div id="test-tree-demo1"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-form-item layui-hide">
            <input id="uidsub" class="form-control" name="uid" type="hidden" value="">

            <input type="button" lay-submit lay-filter="LAY-user-front-submit" lay-demo="getChecked" id="LAY-user-front-submit" value="确认">
        </div>
    </div>
    <script src="../../../layuiadmin/js/jquery.min2.1.4.js"></script>
    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script src="../../../layuiadmin/js/jshelp.js"></script>
    <script>
        var menuid = eval(parent.arr_id);
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
            }).use(['transfer', 'layer', 'table', 'element', 'form', 'tree', 'util'], function () {
                var layer = layui.layer //弹层
                    , table = layui.table
                    , form = layui.form
                    , layuiTree = layui.tree
                    , $ = layui.$
                    , transfer = layui.transfer
                    , util = layui.util
                    , element = layui.element; //元素操作 


            //加载选项下拉框
            var menudata;
            $.ajax({
                type: "get",
                async: false, //请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
                url: "ashx/list.ashx?type=getmenuinfo&menuids=" + menuid,
                dataType: "json",
                success: function (data) {
                    //加载全部菜单列表
                    menudata = data.data;
                },
                error: function (data) {
                    layer.error(data);
                }
            });

            //加载tree
                layuiTree.render({
                elem: '#test-tree-demo1'
                , data: menudata
                , showCheckbox: true  //是否显示复选框
                , id: 'test-tree-demoId1'
                , isJump: false //是否允许点击节点时弹出新窗口跳转
                , click: function (obj) {
                    var data = obj.data;  //获取当前点击的节点数据
                    layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                }
            });
            //tree.setChecked('test-tree-demoId1', menuid); //勾选指定节点
            //按钮事件
            util.event('lay-demo', {
                getChecked: function (othis) {
                    var checkedData = layuiTree.getChecked('test-tree-demoId1'); //获取选中节点的数据
                    $("#uidsub").val(JSON.stringify(checkedData));
                }
                , setChecked: function () {
                    allSelect(menudata)
                    layuiTree.reload('test-tree-demoId1', {
                        data: menudata
                    });
                }
                , setUnChecked: function () {
                    allUnSelect(menudata)
                    layuiTree.reload('test-tree-demoId1', {
                        data: menudata
                    });
                }
                , setReverseChecked: function () {
                    reverseChecked(menudata)
                    layuiTree.reload('test-tree-demoId1', {
                        data: menudata
                    });
                }
        
            });
            // 全选
            function allSelect(database) {
                $.each(database, function (index, item) {
                    item.checked = true;
                    if (item.children != undefined) {
                        if (item.children.length) {
                            $.each(item.children, function (index2, item2) {
                                if (!item2.checked) {
                                    item2.checked = true;
                                }
                            })
                        }
                    }
                   

                })
            }
            //全不选
            function allUnSelect(database) {
                $.each(database, function (index, item) {
                    item.checked = false;
                    if (item.children != undefined) {
                        if (item.children.length) {
                            $.each(item.children, function (index2, item2) {
                                if (item2.checked) {
                                    item2.checked = false;
                                }
                            })
                        }
                    }
                   
                })
            }
            //反选
            function reverseChecked(database) {
                var checkedData = layuiTree.getChecked('test-tree-demoId1'); //获取选中节点的数据
                // let allElement = getId(database);
                let selectElement = getId(checkedData);
                if (selectElement.length) {
                    $.each(database, function (index, item) {
                        if (item.children != undefined) {
                            $.each(item.children, function (index2, item2) {
                                if (selectElement.includes(item2.id)) {
                                    item2.checked = false;
                                } else {
                                    item2.checked = true;
                                }
                            })
                        }
                        
                    })
                } else {
                    allUnSelect(database);
                }
                // console.log(allElement, '数据')
                // console.log(getId(checkedData), '选中数据')
            }
            // y用来递归筛选id
            function getId(data) {
                let myArmy = [];

                $.each(data, function (index, item) {
                    if (item.children.length) {
                        $.each(item.children, function (index2, item2) {
                            myArmy.push(item2.id)
                        })
                    }
                })
                return myArmy;
            }

        });

      

    </script>
</body>
</html>